<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>领用明细审批</title>
    <!-- 引入样式 -->
    <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
    <!-- 引入组件库 -->
    <script src="/ssmzy05/static/js/vue.js"></script>
    <script src="https://unpkg.com/element-ui/lib/index.js"></script>
    <script src="/ssmzy05/static/js/jquery-3.3.1.min.js"></script>
    <link rel="stylesheet" href="/ssmzy05/static/css/index.css">

    <style>
        #app{
            margin-left: 55px;
        }
    </style>
</head>
<body>
    <div id="app">
        <div id="button-div">
            <el-button type="primary" @click="query('审批中')">待审核</el-button>
            <el-button type="success" @click="query('已通过')">已通过</el-button>
            <el-button type="danger" @click="query('未通过')">未通过</el-button>
        </div>

        <!-- 数据 -->
        <div>
            <template>
                <el-table :data="details">
                    <el-table-column property="LYMXID" label="明细编号"></el-table-column>
                    <el-table-column property="LYSQID" label="领用申请单编号"></el-table-column>
                    <el-table-column property="GOODSNAME" label="领用物品"></el-table-column>
                    <el-table-column property="SQNUM" label="申请数量"></el-table-column>
                    <el-table-column property="DJNUM" label="登记数量"></el-table-column>
                    <el-table-column property="DJJE" label="登记金额"></el-table-column>
                    <el-table-column label="操 作" width="200">
                        <template slot-scope="scope">
                            <el-button type="success" size="small" @click=""> 予以通过 </el-button>

                            <el-button type="danger" size="small" @click=""> 予以作废 </el-button>
                        </template>
                    </el-table-column>
                </el-table>
            </template>
        </div>
    </div>
    <script>
        let vm = new Vue({
            el:"#app",
            data:{
                details:[]
            },
            methods:{
                query(op){

                    alert(op);
                    let _this = this;
                    let urlStr = "";
                    if (op=="" || op==null){
                        urlStr = "/ssmzy05/receiveDetail/query/null";
                    }else{
                        urlStr = "/ssmzy05/receiveDetail/query/"+op;
                    }
                    $.ajax({
                        async:true,
                        type:"get",
                        url:urlStr,
                        dataType:"json",
                        success:function(jsonDate){
                            _this.details = jsonDate.data;
                        }
                    });
                }
            },
            mounted(){
                this.query("");
            }
        });
    </script>
</body>
</html>